<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Plugins for Blueprint CSS Framework" /> 
<meta name="keywords" content="Plugins for Blueprint CSS Framework" />
<meta name="author" content="Marcin Habryn (widmogrod@gmail.com)"/>

<!-- Framework CSS -->
<link rel="stylesheet" href="../../libs/blueprint/screen.css" type="text/css" media="screen, projection"/>

<!-- Plugin -->
<link rel="stylesheet" href="../../plugins/actions/actions.css" type="text/css" media="screen, projection"/>


<title>Blueprint CSS - Plugins :: Actions</title>
</head>
<body>
<div class="container">
	<h1><a href="http://code.google.com/p/blueprint-plugins/">Blueprint Css plugins :: Actions</a></h1>
	<hr/>

	<h2>Wstęp</h2>
	<p>Plugin w założeniu ma pomóc w szybkim udekorowaniu backend-owych części serwisu takich jak:</p>
	<ul>
		<li>linki akcji (&lt;a class=”action add”&gt;anchor&lt;/a&gt;)</li>
		<li>przycisk submit,button (&lt;input type=”button” class=”action add” /&gt;)</li>
		<li>styli listy (&lt;li class=”action add”&gt;name&lt;/li&gt;)</li>
		<li>itd.</li>
	</ul>

	<h2>Zastosowanie</h2>
	
	<p>Zastosowanie go w celach frontend-owych może mieć sens ale należy Sobie odpowiedzieć na pytanie:<br/>
	czy potrzebujemy tak dużego zestawu akcji?</p>
	<p>Podstawowy przykład użycia - wszystkie zestawy:</p>
	<code>
		&lt;link rel="stylesheet" href="../../plugins/actions/actions.css" type="text/css" /&gt;
	</code>
	
	<p>Gdy potrzebujemy tylko wybranego zestawu ikon anie całego pakietu – a mamy taką możliwość – załączamy go do projektu w następujący sposób:</p>
	
	<code>
		&lt;link rel="stylesheet" href="../../plugins/actions/default.css" type="text/css" /&gt;
		&lt;-- &lt;link rel="stylesheet" href="../../plugins/actions/normal.css" type="text/css" /&gt; --&gt;
		&lt;-- &lt;link rel="stylesheet" href="../../plugins/actions/small.css" type="text/css" /&gt; --&gt;
		&lt;-- &lt;link rel="stylesheet" href="../../plugins/actions/big.css" type="text/css" /&gt; --&gt;
	</code>
	
	<p>Należy odkomentować wybrany zestaw ikon</p>
	
	<h3>Teoretycznie</h3>
	
	<code>
		&lt;a class="action &lt;small|big&gt; &lt;ico&gt; &lt;akcja&gt;" href="">&lt;/a&gt;
		&lt;li class="action &lt;small|big&gt; &lt;ico&gt; &lt;akcja&gt;" &gt;&lt;/li&gt;
		&lt;input class="action &lt;small|big&gt; &lt;ico&gt; &lt;akcja&gt;" type="input" /&gt;
	</code>

	<p>Atrybuty akcji `small` i `big` oraz `ico` są opcjonalne.</p>
	<dl>
		<dt>akcja</dt>
		<dd>nazwa akcji, której odpowiada ikona</dd>
		<dt>small, big</dt>
		<dd>odpowiednio duży i mały zestaw ikon akcji</dd>
		<dt>ico</dt>
		<dd>odpowiada za wcięcie tekstu - widoczna jest tylko ikona akcji</dd>
		<dt>normal</dt>
		<dd>domyślny styl - nie dodajemy klasy tak jak dla `small` i `big`</dd>
	</dl>
	
	<h3>Praktycznie</h3>
	
	<code>
		&lt;a class="action small ico add" href="">&lt;/a&gt;
		&lt;li class="action big add" &gt;&lt;/li&gt;
		&lt;input class="action add" type="input" /&gt;
	</code>

	<h2>Przykład</h2>
	<p>Poniżej prezentuję zestawienie trzech podstawowych wielkości ikon</p>
	<ul>
		<li>normal</li>
		<li>small</li>
		<li>big (w trakcie rozwoju – a dokładniej brak ikon, szukanie zastępczych)</li>
	</ul>
	
	<p>i ich wizualizację</p>

	<table>
		<thead>
			<tr>
				<th class="span-3"><h4>Zestaw ikon</h4></th>
				<th colspan="2"><h4>Normal</h4></th>
				<th colspan="2"><h4>Small</h4></th>
				<th colspan="2"><h4>Big</h4></th>
			</tr>
			<tr class="even">
				<td class="span-3">atrybut class</td>
				<td>default</td>
				<td>ico</td>
				<td>default</td>
				<td>ico</td>
				<td>default</td>
				<td>ico</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>add</td>
				<td><a class="action add" href="">example link</a></td>
				<td><a class="action add ico" href="">example link</a></td>
				<td><a class="action add small" href="">example link</a></td>
				<td><a class="action add ico small" href="">example link</a></td>
				<td><a class="action add big" href="">example link</a></td>
				<td><a class="action add ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>add-1</td>
				<td><a class="action add-1" href="">example link</a></td>
				<td><a class="action add-1 ico" href="">example link</a></td>
				<td><a class="action add-1 small" href="">example link</a></td>
				<td><a class="action add-1 ico small" href="">example link</a></td>
				<td><a class="action add-1 big" href="">example link</a></td>
				<td><a class="action add-1 ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>edit</td>
				<td><a class="action edit" href="">example link</a></td>
				<td><a class="action edit ico" href="">example link</a></td>
				<td><a class="action edit small" href="">example link</a></td>
				<td><a class="action edit ico small" href="">example link</a></td>
				<td><a class="action edit big" href="">example link</a></td>
				<td><a class="action edit ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>delete</td>
				<td><a class="action delete" href="">example link</a></td>
				<td><a class="action delete ico" href="">example link</a></td>
				<td><a class="action delete small" href="">example link</a></td>
				<td><a class="action delete ico small" href="">example link</a></td>
				<td><a class="action delete big" href="">example link</a></td>
				<td><a class="action delete ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>delete-1</td>
				<td><a class="action delete-1" href="">example link</a></td>
				<td><a class="action delete-1 ico" href="">example link</a></td>
				<td><a class="action delete-1 small" href="">example link</a></td>
				<td><a class="action delete-1 ico small" href="">example link</a></td>
				<td><a class="action delete-1 big" href="">example link</a></td>
				<td><a class="action delete-1 ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>cancel</td>
				<td><a class="action cancel" href="">example link</a></td>
				<td><a class="action cancel ico" href="">example link</a></td>
				<td><a class="action cancel small" href="">example link</a></td>
				<td><a class="action cancel ico small" href="">example link</a></td>
				<td><a class="action cancel big" href="">example link</a></td>
				<td><a class="action cancel ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>notice</td>
				<td><a class="action notice" href="">example link</a></td>
				<td><a class="action notice ico" href="">example link</a></td>
				<td><a class="action notice small" href="">example link</a></td>
				<td><a class="action notice ico small" href="">example link</a></td>
				<td><a class="action notice big" href="">example link</a></td>
				<td><a class="action notice ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>warning</td>
				<td><a class="action warning" href="">example link</a></td>
				<td><a class="action warning ico" href="">example link</a></td>
				<td><a class="action warning small" href="">example link</a></td>
				<td><a class="action warning ico small" href="">example link</a></td>
				<td><a class="action warning big" href="">example link</a></td>
				<td><a class="action warning ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>true</td>
				<td><a class="action true" href="">example link</a></td>
				<td><a class="action true ico" href="">example link</a></td>
				<td><a class="action true small" href="">example link</a></td>
				<td><a class="action true ico small" href="">example link</a></td>
				<td><a class="action true big" href="">example link</a></td>
				<td><a class="action true ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>false</td>
				<td><a class="action false" href="">example link</a></td>
				<td><a class="action false ico" href="">example link</a></td>
				<td><a class="action false small" href="">example link</a></td>
				<td><a class="action false ico small" href="">example link</a></td>
				<td><a class="action false big" href="">example link</a></td>
				<td><a class="action false ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>folder</td>
				<td><a class="action folder" href="">example link</a></td>
				<td><a class="action folder ico" href="">example link</a></td>
				<td><a class="action folder small" href="">example link</a></td>
				<td><a class="action folder ico small" href="">example link</a></td>
				<td><a class="action folder big" href="">example link</a></td>
				<td><a class="action folder ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>folder-open</td>
				<td><a class="action folder-open" href="">example link</a></td>
				<td><a class="action folder-open ico" href="">example link</a></td>
				<td><a class="action folder-open small" href="">example link</a></td>
				<td><a class="action folder-open ico small" href="">example link</a></td>
				<td><a class="action folder-open big" href="">example link</a></td>
				<td><a class="action folder-open ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>image</td>
				<td><a class="action image" href="">example link</a></td>
				<td><a class="action image ico" href="">example link</a></td>
				<td><a class="action image small" href="">example link</a></td>
				<td><a class="action image ico small" href="">example link</a></td>
				<td><a class="action image big" href="">example link</a></td>
				<td><a class="action image ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>list</td>
				<td><a class="action list" href="">example link</a></td>
				<td><a class="action list ico" href="">example link</a></td>
				<td><a class="action list small" href="">example link</a></td>
				<td><a class="action list ico small" href="">example link</a></td>
				<td><a class="action list big" href="">example link</a></td>
				<td><a class="action list ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>note</td>
				<td><a class="action note" href="">example link</a></td>
				<td><a class="action note ico" href="">example link</a></td>
				<td><a class="action note small" href="">example link</a></td>
				<td><a class="action note ico small" href="">example link</a></td>
				<td><a class="action note big" href="">example link</a></td>
				<td><a class="action note ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>home</td>
				<td><a class="action home" href="">example link</a></td>
				<td><a class="action home ico" href="">example link</a></td>
				<td><a class="action home small" href="">example link</a></td>
				<td><a class="action home ico small" href="">example link</a></td>
				<td><a class="action home big" href="">example link</a></td>
				<td><a class="action home ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>rss</td>
				<td><a class="action rss" href="">example link</a></td>
				<td><a class="action rss ico" href="">example link</a></td>
				<td><a class="action rss small" href="">example link</a></td>
				<td><a class="action rss ico small" href="">example link</a></td>
				<td><a class="action rss big" href="">example link</a></td>
				<td><a class="action rss ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>vcard</td>
				<td><a class="action vcard" href="">example link</a></td>
				<td><a class="action vcard ico" href="">example link</a></td>
				<td><a class="action vcard small" href="">example link</a></td>
				<td><a class="action vcard ico small" href="">example link</a></td>
				<td><a class="action vcard big" href="">example link</a></td>
				<td><a class="action vcard ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>mail</td>
				<td><a class="action mail" href="">example link</a></td>
				<td><a class="action mail ico" href="">example link</a></td>
				<td><a class="action mail small" href="">example link</a></td>
				<td><a class="action mail ico small" href="">example link</a></td>
				<td><a class="action mail big" href="">example link</a></td>
				<td><a class="action mail ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>tag</td>
				<td><a class="action tag" href="">example link</a></td>
				<td><a class="action tag ico" href="">example link</a></td>
				<td><a class="action tag small" href="">example link</a></td>
				<td><a class="action tag ico small" href="">example link</a></td>
				<td><a class="action tag big" href="">example link</a></td>
				<td><a class="action tag ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>male</td>
				<td><a class="action male" href="">example link</a></td>
				<td><a class="action male ico" href="">example link</a></td>
				<td><a class="action male small" href="">example link</a></td>
				<td><a class="action male ico small" href="">example link</a></td>
				<td><a class="action male big" href="">example link</a></td>
				<td><a class="action male ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>female</td>
				<td><a class="action female" href="">example link</a></td>
				<td><a class="action female ico" href="">example link</a></td>
				<td><a class="action female small" href="">example link</a></td>
				<td><a class="action female ico small" href="">example link</a></td>
				<td><a class="action female big" href="">example link</a></td>
				<td><a class="action female ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>calendar</td>
				<td><a class="action calendar" href="">example link</a></td>
				<td><a class="action calendar ico" href="">example link</a></td>
				<td><a class="action calendar small" href="">example link</a></td>
				<td><a class="action calendar ico small" href="">example link</a></td>
				<td><a class="action calendar big" href="">example link</a></td>
				<td><a class="action calendar ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>comment</td>
				<td><a class="action comment" href="">example link</a></td>
				<td><a class="action comment ico" href="">example link</a></td>
				<td><a class="action comment small" href="">example link</a></td>
				<td><a class="action comment ico small" href="">example link</a></td>
				<td><a class="action comment big" href="">example link</a></td>
				<td><a class="action comment ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>important</td>
				<td><a class="action important" href="">example link</a></td>
				<td><a class="action important ico" href="">example link</a></td>
				<td><a class="action important small" href="">example link</a></td>
				<td><a class="action important ico small" href="">example link</a></td>
				<td><a class="action important big" href="">example link</a></td>
				<td><a class="action important ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>favorite</td>
				<td><a class="action favorite" href="">example link</a></td>
				<td><a class="action favorite ico" href="">example link</a></td>
				<td><a class="action favorite small" href="">example link</a></td>
				<td><a class="action favorite ico small" href="">example link</a></td>
				<td><a class="action favorite big" href="">example link</a></td>
				<td><a class="action favorite ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>find</td>
				<td><a class="action find" href="">example link</a></td>
				<td><a class="action find ico" href="">example link</a></td>
				<td><a class="action find small" href="">example link</a></td>
				<td><a class="action find ico small" href="">example link</a></td>
				<td><a class="action find big" href="">example link</a></td>
				<td><a class="action find ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>settings</td>
				<td><a class="action settings" href="">example link</a></td>
				<td><a class="action settings ico" href="">example link</a></td>
				<td><a class="action settings small" href="">example link</a></td>
				<td><a class="action settings ico small" href="">example link</a></td>
				<td><a class="action settings big" href="">example link</a></td>
				<td><a class="action settings ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>settings-1</td>
				<td><a class="action settings-1" href="">example link</a></td>
				<td><a class="action settings-1 ico" href="">example link</a></td>
				<td><a class="action settings-1 small" href="">example link</a></td>
				<td><a class="action settings-1 ico small" href="">example link</a></td>
				<td><a class="action settings-1 big" href="">example link</a></td>
				<td><a class="action settings-1 ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>attach</td>
				<td><a class="action attach" href="">example link</a></td>
				<td><a class="action attach ico" href="">example link</a></td>
				<td><a class="action attach small" href="">example link</a></td>
				<td><a class="action attach ico small" href="">example link</a></td>
				<td><a class="action attach big" href="">example link</a></td>
				<td><a class="action attach ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>refresh</td>
				<td><a class="action refresh" href="">example link</a></td>
				<td><a class="action refresh ico" href="">example link</a></td>
				<td><a class="action refresh small" href="">example link</a></td>
				<td><a class="action refresh ico small" href="">example link</a></td>
				<td><a class="action refresh big" href="">example link</a></td>
				<td><a class="action refresh ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>loader</td>
				<td><a class="action loader" href="">example link</a></td>
				<td><a class="action loader ico" href="">example link</a></td>
				<td><a class="action loader small" href="">example link</a></td>
				<td><a class="action loader ico small" href="">example link</a></td>
				<td><a class="action loader big" href="">example link</a></td>
				<td><a class="action loader ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>language</td>
				<td><a class="action language" href="">example link</a></td>
				<td><a class="action language ico" href="">example link</a></td>
				<td><a class="action language small" href="">example link</a></td>
				<td><a class="action language ico small" href="">example link</a></td>
				<td><a class="action language big" href="">example link</a></td>
				<td><a class="action language ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>copy</td>
				<td><a class="action copy" href="">example link</a></td>
				<td><a class="action copy ico" href="">example link</a></td>
				<td><a class="action copy small" href="">example link</a></td>
				<td><a class="action copy ico small" href="">example link</a></td>
				<td><a class="action copy big" href="">example link</a></td>
				<td><a class="action copy ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>stats</td>
				<td><a class="action stats" href="">example link</a></td>
				<td><a class="action stats ico" href="">example link</a></td>
				<td><a class="action stats small" href="">example link</a></td>
				<td><a class="action stats ico small" href="">example link</a></td>
				<td><a class="action stats big" href="">example link</a></td>
				<td><a class="action stats ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>stats-1</td>
				<td><a class="action stats-1" href="">example link</a></td>
				<td><a class="action stats-1 ico" href="">example link</a></td>
				<td><a class="action stats-1 small" href="">example link</a></td>
				<td><a class="action stats-1 ico small" href="">example link</a></td>
				<td><a class="action stats-1 big" href="">example link</a></td>
				<td><a class="action stats-1 ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>stats-2</td>
				<td><a class="action stats-2" href="">example link</a></td>
				<td><a class="action stats-2 ico" href="">example link</a></td>
				<td><a class="action stats-2 small" href="">example link</a></td>
				<td><a class="action stats-2 ico small" href="">example link</a></td>
				<td><a class="action stats-2 big" href="">example link</a></td>
				<td><a class="action stats-2 ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>stats-3</td>
				<td><a class="action stats-3" href="">example link</a></td>
				<td><a class="action stats-3 ico" href="">example link</a></td>
				<td><a class="action stats-3 small" href="">example link</a></td>
				<td><a class="action stats-3 ico small" href="">example link</a></td>
				<td><a class="action stats-3 big" href="">example link</a></td>
				<td><a class="action stats-3 ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>key</td>
				<td><a class="action key" href="">example link</a></td>
				<td><a class="action key ico" href="">example link</a></td>
				<td><a class="action key small" href="">example link</a></td>
				<td><a class="action key ico small" href="">example link</a></td>
				<td><a class="action key big" href="">example link</a></td>
				<td><a class="action key ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>lock</td>
				<td><a class="action lock" href="">example link</a></td>
				<td><a class="action lock ico" href="">example link</a></td>
				<td><a class="action lock small" href="">example link</a></td>
				<td><a class="action lock ico small" href="">example link</a></td>
				<td><a class="action lock big" href="">example link</a></td>
				<td><a class="action lock ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>unlock</td>
				<td><a class="action unlock" href="">example link</a></td>
				<td><a class="action unlock ico" href="">example link</a></td>
				<td><a class="action unlock small" href="">example link</a></td>
				<td><a class="action unlock ico small" href="">example link</a></td>
				<td><a class="action unlock big" href="">example link</a></td>
				<td><a class="action unlock ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>shield</td>
				<td><a class="action shield" href="">example link</a></td>
				<td><a class="action shield ico" href="">example link</a></td>
				<td><a class="action shield small" href="">example link</a></td>
				<td><a class="action shield ico small" href="">example link</a></td>
				<td><a class="action shield big" href="">example link</a></td>
				<td><a class="action shield ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>web</td>
				<td><a class="action web" href="">example link</a></td>
				<td><a class="action web ico" href="">example link</a></td>
				<td><a class="action web small" href="">example link</a></td>
				<td><a class="action web ico small" href="">example link</a></td>
				<td><a class="action web big" href="">example link</a></td>
				<td><a class="action web ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>save</td>
				<td><a class="action save" href="">example link</a></td>
				<td><a class="action save ico" href="">example link</a></td>
				<td><a class="action save small" href="">example link</a></td>
				<td><a class="action save ico small" href="">example link</a></td>
				<td><a class="action save big" href="">example link</a></td>
				<td><a class="action save ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>hot</td>
				<td><a class="action hot" href="">example link</a></td>
				<td><a class="action hot ico" href="">example link</a></td>
				<td><a class="action hot small" href="">example link</a></td>
				<td><a class="action hot ico small" href="">example link</a></td>
				<td><a class="action hot big" href="">example link</a></td>
				<td><a class="action hot ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>paste</td>
				<td><a class="action paste" href="">example link</a></td>
				<td><a class="action paste ico" href="">example link</a></td>
				<td><a class="action paste small" href="">example link</a></td>
				<td><a class="action paste ico small" href="">example link</a></td>
				<td><a class="action paste big" href="">example link</a></td>
				<td><a class="action paste ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>time</td>
				<td><a class="action time" href="">example link</a></td>
				<td><a class="action time ico" href="">example link</a></td>
				<td><a class="action time small" href="">example link</a></td>
				<td><a class="action time ico small" href="">example link</a></td>
				<td><a class="action time big" href="">example link</a></td>
				<td><a class="action time ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>alarm</td>
				<td><a class="action alarm" href="">example link</a></td>
				<td><a class="action alarm ico" href="">example link</a></td>
				<td><a class="action alarm small" href="">example link</a></td>
				<td><a class="action alarm ico small" href="">example link</a></td>
				<td><a class="action alarm big" href="">example link</a></td>
				<td><a class="action alarm ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>alarm-1</td>
				<td><a class="action alarm-1" href="">example link</a></td>
				<td><a class="action alarm-1 ico" href="">example link</a></td>
				<td><a class="action alarm-1 small" href="">example link</a></td>
				<td><a class="action alarm-1 ico small" href="">example link</a></td>
				<td><a class="action alarm-1 big" href="">example link</a></td>
				<td><a class="action alarm-1 ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>trash</td>
				<td><a class="action trash" href="">example link</a></td>
				<td><a class="action trash ico" href="">example link</a></td>
				<td><a class="action trash small" href="">example link</a></td>
				<td><a class="action trash ico small" href="">example link</a></td>
				<td><a class="action trash big" href="">example link</a></td>
				<td><a class="action trash ico big" href="">example link</a></td>
			</tr>
			<tr>
				<td>bug</td>
				<td><a class="action bug" href="">example link</a></td>
				<td><a class="action bug ico" href="">example link</a></td>
				<td><a class="action bug small" href="">example link</a></td>
				<td><a class="action bug ico small" href="">example link</a></td>
				<td><a class="action bug big" href="">example link</a></td>
				<td><a class="action bug ico big" href="">example link</a></td>
			</tr>
			<tr class="even">
				<td>group</td>
				<td><a class="action group" href="">example link</a></td>
				<td><a class="action group ico" href="">example link</a></td>
				<td><a class="action group small" href="">example link</a></td>
				<td><a class="action group ico small" href="">example link</a></td>
				<td><a class="action group big" href="">example link</a></td>
				<td><a class="action group ico big" href="">example link</a></td>
			</tr>
		</tbody>
	</table>

</div>
</body>
</html>